<template>
	<view class="whitePage">
		<!-- tab切换 -->
		<view class="tab">
			<image
				:src="`${imgUrl}${tabIndex ? 'powerCarTab' : 'rateTab'}.jpg`"
				mode="widthFix"
				style="width: 100%;"
			/>
			<view class="flex" >
				<view 
					v-for="(item, k) in tab"
					:key="k"
					@click="tabCheck(k)"
					:style="{color: tabIndex == k ? '#fff' : '#a9a29c'}"
				>
				  {{ item }}
				</view>
			</view>
		</view>
		<!-- 历史记录和扫码 -->
		<view class="flex history">
			<view @click="toHistory">历史记录</view>
			<view :class="['scan', deviceState && 'connect']" @click="scanQR">
				<!-- testSelecrt -->
				<image :src="`${imgUrl}scan-${deviceState ? '1' : '2'}.png`" mode="widthFix" />
				<text>我要评估</text>
			</view>
		</view>
		<!-- 设备展示图 -->
		<view class="deviceBox flex" :style="{background: tabIndex && '#fbf9f8'}">
			<image
				:src="`${imgUrl}${tabIndex ? 'powerCar' : 'rateDevice'}.jpg`"
				mode="widthFix"
				style="width: 628rpx;"
			/>
		</view>
	</view>
</template>

<script>
	import { connect } from "@/api/device.js";
	import { imgUrl } from "@/utils/baseUrl.js";
	import { ws } from "@/common/ws.js";
	export default {
		data() {
			return {
				imgUrl,
				tab: ['一体机运动风险评估', '功率车运动风险评估'],
				tabIndex: 0,
				deviceState: false,
				deviceId: ''
			}
		},
		onShow() {
			uni.getStorageSync("token") && this.connectWS()
		},
		onHide() {
			ws.stop(() => {
				uni.removeStorageSync("deviceId")
			})
		},
		methods: {
			// tab切换
			tabCheck(index) {
				this.tabIndex = index
				this.deviceId = ''
				this.deviceState = false
				uni.removeStorageSync("deviceId")
			},
			// 扫描二维码处理
			scanQR() {
				if(!uni.getStorageSync("token")) {
					uni.navigateTo({url: "/pagesSubPack/myCenter/login"})
					return
				}
				if(this.deviceState) return
				uni.scanCode({
				  success: (res) => {
						const resultArr = res.result.split("#")
						let title = ''
						if (this.tabIndex == 0 && resultArr[0] != "HeartRateSystem") {
							title = '您当前所在是一体机测试，请扫描一体机设备二维码哦~'
						}
						if (this.tabIndex == 1 && resultArr[0] != "ellipticals") {
							title = '您当前所在是功率车测试，请扫描功率车设备二维码哦~'
						}
						if(title) {
							uni.showModal({title, showCancel: false});
							return
						}
				    this.deviceId = res.result
						this.deviceConnect()
				  }
				});
			},
			// 设备连接
			deviceConnect() {
				connect({
					deviceId: this.deviceId,
				}).then(() => {
					this.deviceState = true
					uni.setStorageSync("deviceId", this.deviceId)
				})
			},
			// 连接WS，监听设备状态
			connectWS() {
				uni.showLoading({
					title: "连接中...",
				});
				ws.socket((eve) => { // 连接失败
					this.deviceState = false
					uni.showLoading({ title: eve.messge})
				},() => { // 连接成功
					if(this.deviceId) this.deviceState = true
					uni.hideLoading()
				}, (e) => { // 接收数据
					if(e.event == "connectFail") this.deviceState = false
					if(e.event == "connectSuccess") this.deviceState = true
				})
			},
			// 查看历史记录
			toHistory() {
				uni.navigateTo({
					url: "/pages/myCenter/pages/testRecord/testRecord"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tab {
	position: relative;
	.flex {
		position: absolute;
		color: #fff;
		font-size: 30rpx;
		top: 20rpx;
		padding: 0 40rpx;
		width: 100%;
		justify-content: space-between;
	}
}
.history {
	padding: 0 58rpx;
	margin-top: -10rpx;
	> view {
		width: 250rpx;
		height: 90rpx;
		border-radius: 15rpx;
		text-align: center;
		line-height: 90rpx;
		&:first-child {
			font-size: 30rpx;
			background: #21ab38;
			color: #fff;
		}
	}
	.scan {
		background: #f7f7f7;
		color: #999999;
		position: relative;
		font-size: 26rpx;
		margin-left: 110rpx;
		text {
			padding-top: 16rpx;
		}
		image {
			width: 55rpx;
			top: -25rpx;
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
		}
		&.connect {
			border: 1px solid #6ac2f1;
			color: #6ac2f1;
			background: #f2fbff;
		}
	}
}
.deviceBox {
	box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0,0,0,0.03);
	height: calc(100vh - 282rpx);
	margin-top: 50rpx;
	image {
		margin: auto;
	}
}
</style>